import React, { Component } from 'react'
import echarts from 'echarts'
import { ConfigProvider, DatePicker } from 'antd'
import locale from 'antd/lib/locale/zh_CN';
import "./style.scss"

const { RangePicker } = DatePicker
interface IProps {

}
interface IStates {
    active: number,
    kindActive: number,
    value:any
}

export default class OrderTotal extends Component<IProps, IStates> {
    private myChart: any
    private option: any = {
        color: ["#ffcc89", "#a783c6", "#3565dc"],/**线条颜色 */
        grid: {
            bottom: 40,
           
        },
        tooltip: {
            show: true,
            trigger: "axis"
        },
        // x轴数据配置
        xAxis: {
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "8月", "9月", "10月", "11月", "12月"],
            boundaryGap: false,
            axisTick: {
                alignWithLabel: true
            },
            // x轴-线配置
            axisLine: {
                lineStyle: {
                    color: "rgb(235,235,237)"
                }
            },
            // x轴—文本标签配置
            axisLabel: {
                color: "#333"
            },
        },
        // y轴数据配置
        yAxis: {
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: "rgb(235,235,237)"
                }
            },
            axisLabel: {
                color: "#333",
                interval: 0,
                // y轴自定义值
                formatter: (value: string) => {
                    const v: number = Math.round(Number(value))
                    const l: number = v.toLocaleString().length
                    if (l > 4 && l < 11) {
                        return v / 1000 + "k"
                    } else if (l >= 11 && l <= 15) {
                        return v / 100000000 + "亿"
                    } else {
                        return value
                    }
                }
            },
        },
        // 数据区域配置
        series: [
            {
                name: '销售额',
                type: 'line',
                symbol: "none",
                smooth: true,
                areaStyle: {
                    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#ffcc89' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#fff' // 100% 处的颜色
                    }]
                    ),  //背景渐变色 
                },
                lineStyle: {
                    width: 1
                }
            },

            {
                name: '好评统计',
                type: 'line',
                symbol: "none",
                smooth: true,
                areaStyle: {
                    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#a783c6' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#fff' // 100% 处的颜色
                    }]
                    ),  //背景渐变色 
                },
                lineStyle: {
                    width: 1
                }
            },
            {
                name: '召回次数',
                type: 'line',
                symbol: "none",
                smooth: true,
                areaStyle: {
                    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#3565dc' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#fff' // 100% 处的颜色
                    }]
                    ),  //背景渐变色 
                },
                lineStyle: {
                    width: 1
                }
            }
        ]
    }
    constructor(props: IProps) {
        super(props)
        this.state = {
            active: 1,
            kindActive: 4,
            value:""
        }
    }
    public componentDidMount() {
        const d = document.getElementById("myChartLine") as HTMLCanvasElement
        this.myChart = echarts.init(d)
        this.search(this.state.kindActive, this.state.active)
        // 监听窗口尺寸变化，动态渲染表格大小
        window.addEventListener("resize", () => {
            this.myChart.resize()
        })
    }
    public componentWillUnmount() {
        window.removeEventListener("resize", () => { this.myChart.resize() })
    }
    // 用于网络请求数据
    public search = (type: number, num: number) => {
        this.myChart.clear()
        if (type === 4) {
            if (num === 1) {
                this.option.series[0].data = [4500, 556000, 44600, 66000, 84008, 223004, 14600, 45226, 821212, 475555, 965666, 123556]
                this.option.series[1].data = [650, 3400, 560, 4000, 5088, 20404, 46000, 44426, 89122, 47565, 967866, 121586]
                this.option.series[2].data = [4500, 44500, 365650, 40000, 5228, 20454, 4100, 41226, 8122, 41555, 90666, 3556]
            } else if (num === 2) {
                this.option.series[0].data = [45200, 22000, 14600, 96000, 894008, 213004, 64600, 95226, 871212, 675555, 915666, 523556]
                this.option.series[1].data = [65031, 34600, 66560, 14000, 45088, 201404, 461000, 444126, 891122, 471565, 917866, 191586]
                this.option.series[2].data = [450011, 445001, 465650, 410000, 52228, 204254, 42100, 413226, 81232, 413555, 906366, 333556]
            }
        }
        this.myChart.setOption(this.option)
    }
    // 点击日期按钮事件
    public dateClick = (num: number) => {
        this.setState({ active: num,value:"" }, () => {
            this.search(this.state.kindActive, this.state.active)
        })
    }
    // 点击分类按钮事件
    public kindClick = (num: number) => {
        this.setState({ kindActive: num }, () => {
            this.search(this.state.kindActive, this.state.active)
        })
    }
    // 点击日期选择框事件
    public rangeChange = (date: any, dateStrings: string[]) => {
        this.setState({ active: 3 ,value:date})
    }
    public render() {
        const { active, kindActive,value } = this.state
        return (
            <div className="line-chart-box">
                <div className="line-chart-header">
                    <div className="header-title">食品信息趋势图</div>
                    <div className="header-right">
                        <div className="check-box">
                            <div>
                                <div className={kindActive === 4 ? "kind-active-d" : "kind-d"} onClick={() => { this.kindClick(4) }}>生产总数</div>
                                <div className={kindActive === 5 ? "kind-active" : "kind"} onClick={() => { this.kindClick(5) }}>销售总额</div>
                                <div className={kindActive === 6 ? "kind-active-m" : "kind-m"} onClick={() => { this.kindClick(6) }}>好评统计</div>
                            </div>
                            <div className={active === 1 ? "active" : ""} onClick={() => { this.dateClick(1) }}>近7天</div>
                            <div className={active === 2 ? "active" : ""} onClick={() => { this.dateClick(2) }}>近30天</div>
                        </div>
                        <div>
                            <ConfigProvider locale={locale}>
                            <RangePicker 
                            size="middle"
                            onChange={this.rangeChange}
                            style={{ width: "200px" }}
                            value={value}></RangePicker>
                            </ConfigProvider>
                        </div>
                    </div>
                </div>
                <div className="chart-box">
                    <div id="myChartLine" className="line-chart"></div>
                </div>
            </div>
        )
    }
}